﻿@model Easy.CMS.Section.Models.SectionGroup
@using (Html.BeginForm("Save", "SectionGroup"))
{
    @Html.EditModel()

    <div class="container-fluid" style="margin: 5px 0">
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                显示模板
                <span id="PartialView-Badge" class="badge">@Model.PartialView</span>
                <a href="http://www.zkea.net/zkeacms/templates" target="_blank" class="pull-right">下载更多模板>></a>
            </div>
            <div class="panel-body">
                <div class="container-fluid">
                    <div id="templates" class="row"></div>
                </div>
            </div>
            <div class="panel-footer text-muted">
                把模板包拖到列表区域进行上传
            </div>
        </div>
    </div>
    <div class="upload-process">
        <h1 id="message-info">松开鼠标进行上传...</h1>
        <div class="progress">
            <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0;">

            </div>
        </div>
    </div>
}
<style>
    .caption {
        text-align: center;
    }
    #templates {
        max-height: 305px;
        overflow: auto;
    }
    .upload-process {
        display: none;
        background: #eee;
        position: fixed;
        width: 100%;
        height: 100%;
        text-align: center;
        top: 0;
        z-index: 1000;
        padding: 0 20px;
        height: 120px;
        border-bottom: 1px solid #ddd;
    }

        .upload-process.hover {
            display: block;
        }

    .progress .progress-bar {
        -moz-transition: width .3s ease;
        -o-transition: width .3s ease;
        -webkit-transition: width .3s ease;
        transition: width .3s ease;
    }
</style>
@using (Script.AtFoot())
{
    <script type="text/javascript">
        $(document).on("click", "#confirm", function () {
            $("form").submit();
        });
        $(function () {
            if (@(ViewBag.Close!=null?1:0)) {
                $(".popUpToolBar .btn-default").click();
        }
        });
        $(function() {
            var templates = $("#templates");
            var partView = $("#PartialView");
            $("option",partView).each(function() {
                var value = $(this).val();
                templates.append('<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><a class="thumbnail" href="#'+value+'"><img src="@Url.Content("~/Modules/Section/Views/Thumbnail/")'+value+'.png"/><div class="caption "><span class="badge">'+value+'</span></div></a></div>');
            });
            $(".thumbnail[href='#" + partView.val() + "']").addClass("active");
            partView.parents(".col-md-12").hide();
        });
        $(document).on("click", ".thumbnail", function() {
            $(".thumbnail").removeClass("active");
            $(this).addClass("active");
            var partView = $(this).attr("href").replace("#", "");
            $("#PartialView").val(partView);
            $("#PartialView-Badge").html(partView);
            return false;
        });
        var panel= $(".panel-body")[0];
        panel.ondragover=function(event) {
            $(".upload-process").addClass("hover");
            return false;
        };
        panel.ondragleave=function(event) {
            $(".upload-process").removeClass("hover");
            return false;
        };
        panel.ondrop = function(event) {
            event.preventDefault && event.preventDefault();
            var files = event.dataTransfer.files;
            var formData = new FormData();
            for (var i = 0; i < files.length; i++) {
                formData.append('file', files[i]);
            }
            var progressBar = $("#progress-bar");
            var message = $("#message-info");
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '@Url.Action("UploadTemplate")');
            xhr.onload = function(e) {
                var result = JSON.parse(e.target.response);
                if (result.Status === 1) {
                    setTimeout(function() {
                        window.location.reload();
                    }, 500);
                    message.html(result.Message);
                } else {
                    message.html(result.Message);
                    progressBar.width("0%");
                    progressBar.html("0%");
                }
            };
            xhr.upload.onprogress = function(e) {
                var persecnt = e.loaded / e.total * 100;
                progressBar.width(persecnt + "%");
                progressBar.html(Math.round(persecnt) + "%");
            }
            xhr.send(formData);
            return false;
        };
    </script>
}